<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree Test Page</title>
<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../ui.tree.js"></script>
<style type="text/css">
  @import url(../../../themes/light/light.css);
  @import url(../../../themes/light/light.tree.css);
  @import url(../../../themes/dark/dark.css);
  @import url(../../../themes/dark/dark.tree.css);
  @import url(../../../themes/tango/tango.tree.css);
  .light .toggle a { color:#222; }
  .dark  .toggle a { color:snow; }
  .ui-tree-outline { margin: 1em 6em 1em 0; }
  #tree { margin-right: 12em; }

body { margin:10px; padding:10px; }
.toggle { margin:0; padding: 0; clear:right; float: right; }
.toggle li { font:11pt Verdana; margin:0; padding: 0; width: 5em; display: block; margin-bottom: 0.3em; }
.toggle li a { color: black; display: block; border: 1px solid gray; font:11pt Verdana; text-align:center; text-decoration:none; }
.toggle li a.selected { background: gray; color: white; }
.toggle li a:focus { outline: 1px dotted blue; }

</style>

<script type="text/javascript">

$(function() {

  $('#tree').tree({
    collapse: function(ev, ui) {
      alert($(ui.node).text());
    }
  });

  $('#toggle-theme-none').click(function() {
    $('.toggle a').removeClass('selected');
    $(this).addClass('selected');
    $("body").removeClass("dark").removeClass("tango").removeClass("light");
    return false;
  });

  $('#toggle-theme-light').click(function() {
    $('.toggle a').removeClass('selected');
    $(this).addClass('selected');
    $("body").removeClass("dark").removeClass("tango").addClass("light");
    return false;
  });

  $('#toggle-theme-dark').click(function() {
    $('.toggle a').removeClass('selected');
    $(this).addClass('selected');
    $("body").removeClass("light").removeClass("tango").addClass("dark");
    return false;
  });

  $('#toggle-theme-tango').click(function() {
    $('.toggle a').removeClass('selected');
    $(this).addClass('selected');
    $("body").removeClass("light").removeClass("dark").addClass("tango");
    return false;
  }).click();

});

</script>

</head>

<body>

<ul class="toggle">
  <li><a href="#" id="toggle-theme-none">none</a></li>
  <li><a href="#" id="toggle-theme-light">light</a></li>
  <li><a href="#" id="toggle-theme-dark">dark</a></li>
  <li><a href="#" id="toggle-theme-tango">tango</a></li>
</ul>

<div><input type="text" /></div>

<ul id="tree">
  <li>Lorem ipsum dolor
    <ul>
      <li>sit amet, consectetur</li>
      <li>adipisicing elit, sed
        <ul>
          <li>do eiusmod</li>
          <li>tempor incididunt</li>
        </ul>
      </li>
      <li>ut labore et dolore magna aliqua.</li>
    </ul>
  </li>
  <li>Ut enim ad minim veniam,
    <ul>
      <li>quis nostrud exercitation</li>
      <li>ullamco laboris nisi ut</li>
      <li>aliquip ex ea commodo consequat.</li>
      <li>quis nostrud exercitation</li>
      <li>ullamco laboris nisi ut</li>
      <li>aliquip ex ea commodo consequat.</li>
      <li>quis nostrud exercitation</li>
      <li>ullamco laboris nisi ut</li>
      <li>aliquip ex ea commodo consequat.</li>
    </ul>
  </li>
  <li>Duis aute irure dolor in reprehenderit in
    <ul>
      <li>voluptate velit</li>
      <li>esse cillum dolore eu</li>
      <li>fugiat nulla pariatur.</li>
      <li>voluptate velit</li>
      <li>esse cillum dolore eu</li>
      <li>fugiat nulla pariatur.</li>
    </ul>
  </li>
  <li>Excepteur sint occaecat cupidatat
    <ul>
      <li>non proident,
        <ul>
          <li>sunt in</li>
          <li>culpa qui officia</li>
          <li>deserunt mollit</li>
          <li>anim id est</li>
          <li>laborum</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<div><input type="text" /></div>

</body>
</html>

